<igx-grid #grid id="grid1" class="igx-scrollbar"
    [data]="data"
    [rowEditable]="options?.rowEditable"
    [primaryKey]="options?.primaryKey"
    [groupingExpressions]="options?.groupingExpressions ?? []"
    [displayDensity]="options?.displayDensity"
    [rowSelection]="options?.rowSelection"
    [allowFiltering]="options?.allowFiltering"
    [filterMode]="options?.filterMode"
    [columnSelection]="options?.columnSelection"
    [rowDraggable]="options?.rowDraggable"
    (onSelection)='calculateSummary()'
    (onRangeSelection)='calculateSummary()'
    (columnSelectionChanging)="onColumnSelectionChanging($event)"
    (onCellClick)="onCellClick($event)"
    (onRowDragStart)="_onRowDragStart($event)"
    (onRowDragEnd)="_onRowDragEnd($event)"
    (onRowDeleted)="_onRowDeleted($event)"
    (rowEditEnter)="_rowEditEnter($event)"
    (rowEditDone)="_rowEditDone($event)"
    >

    <igx-column *ngFor="let field of columns$ | async"
        [dataType]="field.type"
        [pipeArgs]="field.pipeArgs"
        [editable]="field.editable"
        [movable]="field.movable"
        [pinned]="field.pinned"
        [hidden]="field.hidden"
        [filterable]="field.filterable"
        [resizable]="field.resizable"
        [width]="field.width"
        [sortable]="field.sortable"
        [selectable]="field.selectable"
        [groupable]="field.groupable"
        [formatter]="field.formatter"
        [field]="field.name"
        [header]="field.label || field.name"
        [cellClasses]="field.cellClasses"
        [cellTemplate]="field.cellTemplate"
        [headerTemplate]="field.headerTemplate"
        [hasSummary]="field.hasSummary"
    >
        <ng-container *ngIf="!field.cellTemplate">
            <ng-container *ngIf="field.unit">
                <ng-container [ngSwitch]="field.unit.semantic">
                    <ng-container *ngSwitchCase="Semantics.CurrencyCode">
                        <ng-template igxCell let-cell="cell" let-val>
                            <span *ngIf="cell.row.rowData[field.name] === 0"
                                class="ngm-semantic--currency-amount igx-grid__td-text">-</span>
                            <span *ngIf="cell.row.rowData[field.name] > 0"
                                class="ngm-semantic--currency-amount igx-grid__td-text">{{val | currency:cell.row.rowData[field.unit.name]:'symbol-narrow'}}</span>
                            <span *ngIf="cell.row.rowData[field.name] < 0"
                                class="ngm-semantic--currency-amount ngm-semantic--currency-amount-negative igx-grid__td-text">({{-val | currency:cell.row.rowData[field.unit.name]:'symbol-narrow'}})</span>
                        </ng-template>
                    </ng-container>
                    <ng-container *ngSwitchCase="Semantics.UnitOfMeasure">
                        <ng-template igxCell let-cell="cell" let-val>
                            <span class="igx-grid__td-text">{{val}}{{cell.row.rowData[field.unit.name]}}</span>
                        </ng-template>
                    </ng-container>
                    <!-- else -->
                    <ng-container *ngSwitchDefault>
                        <ng-template igxCell let-cell="cell" let-val>
                            <span class="igx-grid__td-text">{{val | number}}{{field.unit}}</span>
                        </ng-template>
                    </ng-container>
                </ng-container>
            </ng-container>

            <ng-container *ngIf="field.type === 'date'">
                <ng-template igxCell let-cell="cell" let-val>
                    <span class="igx-grid__td-text">{{val | date}}</span>
                </ng-template>
            </ng-container>

            <ng-container *ngIf="field.type !== 'date' && !field.unit">
                <!-- 组件取值使用了此方式 Given a property access path in the format `x.y.z` resolves and returns the value of the `z` property in the passed object.
                所以对 MDX 的 [Store].[Store City] 这种字段不能支持, 所以覆盖所有单元格取值 -->
                <!-- <ng-template igxCell let-cell="cell" let-val>
                    <span class="igx-grid__td-text">{{cell.rowData[field.name]}}</span>
                </ng-template> -->
            </ng-container>

        </ng-container>

        <ng-container *ngIf="field.selectOptions">
            <ng-template #inlineEditorTemplate igxCellEditor let-cell="cell">
                <igx-select [(ngModel)]="cell.editValue">
                    <igx-select-item *ngFor="let item of field.selectOptions" [value]="item.value">
                        {{item.label}}
                    </igx-select-item>
                </igx-select>
                <!-- <igx-combo type="line" [(ngModel)]="cell.editValue" [displayKey]="'label'"
                    [valueKey]="'value'" [data]="field.selectOptions" [igxFocus]="true"
                ></igx-combo> -->
            </ng-template>
        </ng-container>
    </igx-column>

    <ng-template igxGroupByRow let-groupRow>
        <div class="igx-group-label">
            <igx-icon fontSet="material" class="igx-group-label__icon">group_work</igx-icon>
            <span class="igx-group-label__column-name">
            {{ groupRow.column && groupRow.column.header ?
                groupRow.column.header :
                (groupRow.expression ? groupRow.expression.fieldName : '') }}:
            </span>

            <ng-container *ngIf="groupRow.column.dataType === 'boolean' || groupRow.column.dataType === 'string'; else default" >
                <span class="igx-group-label__text">{{ formatValueText(groupRow.expression.fieldName, groupRow.value) }}</span>
            </ng-container>
            <ng-template #default>
                <ng-container *ngIf="groupRow.column.dataType === 'number'">
                    <span class="igx-group-label__text">{{ groupRow.value | number }}</span>
                </ng-container>
                <ng-container *ngIf="groupRow.column.dataType === 'date'">
                    <span class="igx-group-label__text">{{ groupRow.value | date }}</span>
                </ng-container>
            </ng-template>

            <igx-badge [value]="groupRow.records ? groupRow.records.length : 0" class='igx-group-label__count-badge'></igx-badge>
        </div>
    </ng-template>

    <igx-grid-toolbar *ngIf="options?.showToolbar" [displayDensity]="grid.displayDensity">
        <igx-grid-toolbar-title>{{title}}</igx-grid-toolbar-title>

        <smart-grid-search-bar *ngIf="options?.searching" [grid]="grid"></smart-grid-search-bar>
        
        <igx-grid-toolbar-actions>
            <ng-content select=".smart-grid__toolbar-action"></ng-content>
            <igx-grid-toolbar-pinning *ngIf="options?.columnPinning"
                title="Grid pinned columns"
                prompt="Filter column collection"
                columnListHeight="400px"
            >
            </igx-grid-toolbar-pinning>
            <igx-grid-toolbar-hiding *ngIf="options?.columnHiding"></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-advanced-filtering *ngIf="options?.allowAdvancedFiltering"></igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-exporter *ngIf="options?.exportExcel || options?.exportCsv"
                [exportCSV]="options?.exportCsv"
                [exportExcel]="options?.exportExcel"
            >
                <span excelText>导出到 Excel 文件</span>
                <span csvText>导出到 CSV 文件</span>
            </igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

    <igx-grid-footer>
        <div class="ngm-smart-grid--selection-summaries" *ngIf="options?.showSelectionSummary">
            <div *ngFor="let summary of selectionSummaries" class="summaries-data-wrapper" [ngClass]="grid.displayDensity">
                <span class="igx-grid-summary__label">{{ summary.label }}</span>
                <span class="igx-grid-summary__result">{{ format(summary.summaryResult) }}</span>
            </div>
        </div>
        <ng-content select=".ngm-smart-grid--footer"></ng-content>
    </igx-grid-footer>
    
    <!-- <ng-template igxToolbarCustomContent let-treeGrid="grid">
        <button igxButton="flat" igxRipple [igxRippleCentered]="true" (click)="treeGrid.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>
    </ng-template> -->

    <igx-action-strip #actionstrip *ngIf="options?.rowEditable">
        <smart-grid-actions [actions]="options?.rowActions" (actionClick)="_onRowActionClick($event)"></smart-grid-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>

    <ng-template *ngIf="options?.detailTemplate" igxGridDetail let-dataItem>
        <ng-container *ngTemplateOutlet="options?.detailTemplate; context: {$implicit: dataItem}">
        </ng-container>
    </ng-template>

    <igx-paginator *ngIf="options?.paging" [perPage]="options?.perPage"
        [displayDensity]="grid.displayDensity"></igx-paginator>

    <ng-content></ng-content>
</igx-grid>

<div *ngIf="contextmenu===true">
    <ngm-context-menu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell">
    </ngm-context-menu>
</div>
